<template>
    <div class="goods">
        <div class="wrap">
            <Crumb> </Crumb>
            <img src="http://sc.wolfcode.cn/assets/integralMall/img/users/banner.png" width="100%" alt="" />
            <ul class="options">
                <li>
                    <strong>排序：</strong>
                    <span :class="num1==index?'active':''" v-for="item,index in option1" :key="index"
                        @click="option1Click(index,item.min,item.max)">{{item.txt}}</span>
                </li>
                <li>
                    <strong>分类：</strong>
                    <span :class="num2==index?'active':''" v-for="item,index in option2" :key="index"
                        @click="option2Click(index,item.type)">{{item.txt}}</span>
                </li>
            </ul>
            <List :arr="goodsList" />
        </div>
    </div>
</template>                            
<script>

import Crumb from "../components/Crumb.vue";
import List from "../components/List.vue";
import { SearchGoodsAPI } from '../request/api'
export default {
    data() {
        return {
            did: 0,
            type: 0,
            min: 0,
            max: 0,
            keyword: "",
            num1: 0,
            num2: 0,
            goodsList: [],
            option1: [
                { txt: "全部", min: 0, max: 10000 },
                { txt: "我能兑换的", min: 0, max: 10000 },
                { txt: "0-500分", min: 0, max: 500 },
                { txt: "500-1000分", min: 500, max: 1000 },
                { txt: "1000分-1500分", min: 1000, max: 1500 },
                { txt: "1500-2500分", min: 1500, max: 2500 },
                { txt: "2500-6500分", min: 2500, max: 6500 },
                { txt: "6500-10000分", min: 6500, max: 10000 },
            ],
            option2: [
                { txt: '全部', type: 0 },
                { txt: '实物礼品', type: 1 },
                { txt: '虚拟礼品', type: 2 },
            ]
        };
    },
    methods: {
        option1Click(i, min, max) {
            this.num1 = i;
            this.min = min;
            this.max = max;
            this.goodsSearh();
        },
        option2Click(i, type) {
            this.num2 = i;
            this.type = type;
            this.goodsSearh();
        },
        async goodsSearh() {
            let res = await SearchGoodsAPI({
                did: this.did,
                type: this.type,
                min: this.min,
                max: this.max,
                keyword: this.keyword,
            });
            if (!res) return;
            console.log(res);
            this.goodsList = res.data
        }
    },
    components: {
        Crumb,
        List,
    },
    created() {
        this.keyword = this.$route.query.keyword || "";
        this.goodsSearh();
    },
    watch: {
        '$route.query.keyword': {
            handler(newval, oldval) {
                this.keyword = newval || "";
                this.goodsSearh();
            }
        }
    }
};
</script>
 
<style lang = "less" scoped>
@import "../assets/css/global.less";

.goods {
    padding-bottom: 50px;
    background: #efefef;
    padding-top: 20px;

    .options {
        padding-top: 20px;
        padding-bottom: 40px;

        li {
            margin-top: 20px;

            strong {
                color: #000;
                font-weight: bold;
            }

            span {
                margin-right: 20px;
                margin-left: 10px;
                cursor: pointer;
                color: #999;

                &.active {
                    color: @base-color;
                    font-weight: bold;
                }
            }
        }
    }
}
</style>